import * as React from 'react';
import {
    ReactWidget,
    ApplicationShell,
    WidgetManager,
    PreferenceService,
} from '@theia/core/lib/browser';
import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
import { MenuPath } from '@theia/core';
import { Message } from '@theia/core/lib/browser';
import { OrangeWidgetWidget } from 'orange-widget/lib/browser/orange-widget-widget';
import { InstanceWidget } from './instance-widget';

export const ECS_CONTEXT_MENU: MenuPath = ['theia-examples:ecs-context-menu'];

/** Implementation of the ECS Shell Widget */
@injectable()
export class EcsShellWidget extends ReactWidget {
    /** The ID of the view */
    static readonly ID = 'ecs-shell-widget:view';
    /** The label of the view */
    static readonly LABEL = 'ECS Shell Widget';

    @inject(ApplicationShell) protected readonly shell: ApplicationShell;
    @inject(WidgetManager) protected readonly widgetManager: WidgetManager;
    @inject(PreferenceService) protected readonly preferenceService: PreferenceService;
    // @inject(OrangeWidgetWidget) protected readonly orangeWidget: OrangeWidgetWidget;

    @postConstruct()
    protected init(): void {
        this.doInit();
    }

    protected async doInit(): Promise<void> {
        this.id = EcsShellWidget.ID;
        this.title.label = EcsShellWidget.LABEL;
        this.title.caption = EcsShellWidget.LABEL;
        this.title.closable = true;
        this.title.iconClass = 'fa fa-video-camera';

        // const s = document.createElement('div');
        // s.innerText = "hello ecs shell";
        // this.node.appendChild(s);

        try {
            await this.preferenceService.ready;
            await this.shell.initialized;
        } catch (error) {
            console.error('Failed to initialize EcsShellViewContribution:', error);
        }

        // 移除默认的dom
        // const children = this.shell.node.children;
        // for (let i = 0; i < children.length; i++) {
        //     const child = children[i] as HTMLElement;
        //     this.shell.node.removeChild(child);
        // }
        // 添加自定义布局
        // this.shell.node.appendChild(this.node);
        // console.log('che-----', this.shell.node.children);

        this.update();
    }

    protected async handleInstanceClick(item: { name: string; id: string }): Promise<void> {
        const orangeWidget = await this.widgetManager.getOrCreateWidget(OrangeWidgetWidget.ID) as OrangeWidgetWidget;
        this.shell.mainPanel.addWidget(orangeWidget);
        this.shell.mainPanel.activateWidget(orangeWidget);
        this.shell.mainPanel.addClass('ecs-shell-main-panel');

        const instanceWidget = await this.widgetManager.getOrCreateWidget(
            InstanceWidget.ID,
            {
                id: item?.id,
                name: item?.name,
            }
        ) as InstanceWidget;
        orangeWidget.mainPanel.addWidget(instanceWidget);
        // orangeWidget.mainPanel.activateWidget(w);
        // orangeWidget.mainPanel.update();
    }

    protected override render(): React.ReactNode {
        const instances = [
            {
                name: '实例1',
                id: 'i-abc234234234',
            },
            {
                name: '实例2',
                id: 'i-abc234234235',
            },
        ];
        return (
            <div>
                <h2>实例列表</h2>
                {instances?.map((item) => {
                    return (
                        <div
                            key={item.id}
                            className='ecs-instance-item'
                            style={{
                                borderBottom: '1px solid #e5e5e5',
                                padding: '8px 16px',
                                lineHeight: '20px',
                            }}
                            onClick={() => {
                                this.handleInstanceClick(item);
                            }}
                        >
                            <div>{item.name}</div>
                            <div>{item.id}</div>
                        </div>
                    );
                })}
            </div>
        );
    }

    protected async onAfterAttach(msg: Message): Promise<void> {
        console.log('---------------onAfterAttach')
        super.onAfterAttach(msg);

        const w = await this.widgetManager.getOrCreateWidget(OrangeWidgetWidget.ID);
        this.shell.mainPanel.addWidget(w);
        this.shell.mainPanel.activateWidget(w);
        this.shell.mainPanel.addClass('ecs-shell-main-panel');
    }

    protected onActivateRequest(msg: Message): void {
        super.onActivateRequest(msg);
    }
}
